<template>
	<h3>原始效果</h3>
	<div style="height: 100px;width: 100px;background-color:antiquewhite ">行内引用样式</div>
	
	<h3>1.将style属性值绑定为对象</h3>
    <div :style="{height:'100px',width:'100px',backgroundColor:'antiquewhite'}">对象</div>
	<div :style="{color:'red',fontSize:'20px'}">对象2</div>
	
	<h3>2.将style属性值绑定为数组</h3>
     <div :style="[style1,style2]">数组</div>
</template>

<script setup>
	//演示样式绑定 class属性
	import {ref,reactive,} from 'vue'
     
	 //1.将style属性值绑定为对象
	 //语法：:style="{css属性名1:css属性值1,css属性名2:css属性值2}"
	 const style1=reactive({height:'100px',width:'100px',backgroundColor:'antiquewhite'})
	 const style2=reactive({color:'red',fontSize:'20px'})
</script>

<style scoped>
	
</style>